<template>
	<view class="content" v-if="is_login">
		<!-- <view class="status_bar"></view> -->
		<view class="news-se" @click="GoToPage('message', 'mega-news')">
			<uni-notice-bar showFixText="通知公示栏:" backgroundColor="#01AAED" color="#FFFFFF" :scrollable="true" :text="motisa" />
		</view>

		<view class="notice-container" style="background-color: #01AAED;height: 60rpx;line-height: 60rpx;">
			<view class="notice-left">
				<text class="notice-date">{{ datas }}</text>
				<!-- <text class="notice-content">{{ question.title }}</text> -->
			</view>

			<view @click="GoToPage('peixun', 'questions')">日常测试</view>
		</view>
		<view class="local-position">
			<text>您所在的位置：{{ current_admin }}</text>
		</view>
		<view class="profile-card-container">
			<view class="profile-card">
				<view class="avatar-container">
					<view class="avatar"><image src="../../static/image/test/avatar.png" mode="widthFix" /></view>
					<!-- <view class="medal-list">
						<view class="medal-item">
							<image src="../../static/image/test/medal.png" mode="widthFix" />
						</view>
						<view class="medal-item">
							<image src="../../static/image/test/medal.png" />
						</view>
					</view> -->
				</view>

				<view class="detail">
					<view class="detail-line real-name">
						<text>姓名：{{ user.name }}</text>
					</view>
					<view class="phone">
						<text>手机：{{ user.phone }}</text>
					</view>
					<view class="detail-line group-name">
						<text>班组：{{ user.team }}</text>
					</view>
					<view class="detail-line score-name">
						<text>分数：{{ user.fraction ? user.fraction : 0 }}</text>
					</view>
					<view class="detail-line score-name">
						<text>班组排名：{{user.bzpm}}</text>
					</view>
					<view class="detail-line order-number">
						<text>公司排名：{{ user.ranking }}</text>
					</view>
				</view>
				<view class="other">
					<view class="sign-button" @click="sign()" @tap="showModal" data-target="Modal">
						<!-- <image src="../../static/image/home-sign-button.png" mode="widthFix" /> -->
						<text  v-if="sign_01 == 1"  v-model="widthFix">已签到</text>
						<text v-else @click="sign()">未签到</text>
						</view>
					<view class="testing-weather">
						<text>
							侦测到当前区域天气：
							<text class="weather">{{ weather }}</text>
						</text>
					</view>
					<!-- <view class="sign"><text>您已连续签到<text class="day-number">36</text>天</text></view> -->
				</view>
				<view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
					<view class="cu-dialog" @click="sign">
						<view class="cu-bar bg-white justify-end">
							<view class="content" >每日签到</view>
							<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
						</view>
						<view class="padding-xl">
							<view class="mask-container">
								<view class="testing-weather">
									<text class="text-black">
										侦测当前天气：
										<text class="weather">{{ weather }}</text>
									</text>
								</view>
								<view class="tips"><text class="text-black" v-html="signContent"></text></view>
								<view class="video"><video autoplay :src="videoPath" objectFit="cover" controls></video></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="group-safe-mileage">
				<!-- 本班组已安全行驶 -->
				海科运输已安全运营
				<text class="day-number">{{ class_lcb_days }}</text>
				天
			</view>
			<view class="business-safe-mileage">
				距离下一阶段安全里程碑还有
				<text class="day-number">{{200- (class_lcb_days %200)}}</text>
				天
			</view>
		</view>

		<view class="assessment-container">
			<view class="assessment-title-list">
				<view class="assessment-title-item" @click="change_category_id(0)" :class="category_id == 0 ? 'active' : ''"><text class="text-black">月考核成绩</text></view>
				<view class="assessment-title-item" @click="change_category_id(1)" :class="category_id == 1 ? 'active' : ''"><text class="text-black">季考核成绩</text></view>
			</view>
			<view v-for="(item, index) in list_quarter">
				<view class="assessment-content-list">
					<view class="assessment-content-item">
						<view class="assessment-categroy-title" @click="change_kaohe_c_id(index)">
							<view class="assessment-categroy-title-left">
								<view :class="kaohe_c_id == index ? 'active-icon fadeOut' : 'icon fadeIn'"><image src="../../static/image/c-down.png" mode="widthFix" /></view>
								<view class="title">{{ item.xmmc }}</view>
							</view>
							<view class="assessment-categroy-title-right">
								<!-- 	<view class="choose-stage" @tap="toOpen">
								<text>20-09期次</text>
							</view> -->
								<view class="total-score">
									<text>{{ item.zf }}</text>
								</view>
							</view>
						</view>
						
						<view
							class="assessment-categroy-detail-container"
							v-for="(_item, _index) in item.fl"
							v-show="kaohe_c_id == index"
							:class="kaohe_c_id == index ? 'fadeOut1' : 'fadeIn1'"
						>
							<view class="assessment-categroy-detail">
								<view class="assessment-categroy-detail-title">{{ _item.fl }}</view>
								<view class="assessment-categroy-detail-score">{{ _item.zf }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="overall-order">

			
			<view class="assessment-container">
			<view class="assessment-title-list">
				<view class="assessment-title-item" @click="change_category_ids(0)" :class="category_ids == 0 ? 'active' : ''"><text class="text-black">班组排名</text></view>
				<view class="assessment-title-item" @click="change_category_ids(1)" :class="category_ids == 1 ? 'active' : ''"><text class="text-black">综合排名</text></view>
			</view>
			</view>
			<view class="order-list">
				<view class="order-list-content">
					<view class="second-order-list">
						<view class="avatar" @click="JumpDetail2"><image src="../../static/image/test/avatar.png" mode="widthFix" /></view>
						<view class="flag">
							<image src="../../static/image/flag-2.png" mode="widthFix" />
							<text>2</text>
						</view>
						<view class="nickname">
							<!-- <text>{{person_list[1].nick_name}}</text> -->
							<text>{{ person_list_nick_name2 }}</text>
						</view>
						<view class="score">{{ person_list_zf2 }}</view>
					</view>

					<view class="first-order-list">
						<view class="avatar" @click="JumpDetail1"><image src="../../static/image/test/avatar.png" mode="widthFix" /></view>
						<view class="flag">
							<image src="../../static/image/flag-1.png" mode="widthFix" />
							<text>1</text>
						</view>
						<view class="nickname">
							<text>{{ person_list_nick_name1 }}</text>
						</view>
						<view class="score">{{ person_list_zf1 }}</view>
					</view>

					<view class="third-order-list">
						<view class="avatar" @click="JumpDetail3"><image src="../../static/image/test/avatar.png" mode="widthFix" /></view>
						<view class="flag">
							<image src="../../static/image/flag-3.png" mode="widthFix" />
							<text>3</text>
						</view>

						<view class="nickname">
							<text>{{ person_list_nick_name3 }}</text>
						</view>
						<view class="score">{{ person_list_zf3 }}</view>
					</view>
				</view>
			</view>

			<view class="other-order-list" v-for="(person, index) in person_list" v-if="index > 2" :key="index">
				<view class="other-order-item" @click="JumpDetail(person)">
					<view class="other-order-item-detail">
						<view class="order-list-number">
							<text>{{ index + 1 }}</text>
						</view>
						<view class="order-list-avatar"><image src="../../static/image/test/avatar.png" /></view>
						<view class="order-list-nickname">
							<text>{{ person.nick_name }}</text>
						</view>
					</view>
					<view class="order-list-score">{{ person.zf ? person.zf : 0 }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import jpSelect from '@/components/jp-select/jp-select.vue';
import config from '../../static/common/config.js';
import QQMapWX from '../../js_sdk/qqmap-wx-jssdk.min.js';
import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
import uniSection from '../../components/uni-section/uni-section.vue';

export default {
	components: {
		jpSelect,
		uniNoticeBar,
		uniSection
	},
	data() {
		return {
			sign_01 : '',
			modalName: null,
			weather: '',
			current_admin: '',
			signContent: '',
			list_quarter: [],
			videoPath: '',
			user: {
				name: '',
				phone: '',
				fraction: '',
				ranking: '',
				team: '',
				userName: ''
			},
			sh:'',
			cl:'',
			yz:'',
			is_login: false,
			class_lcb_days: 0,
			class_jllcb_days:0,
			company_lcb_days: 0,
			company_lcb_days1:0,
			userId: '',
			message: '',
			timer: null,
			kaohe_c_id: 0,
			category_id: 0,
			category_ids:0,
			datasa:'',

			// question: {
			// 	date: '',
			// 	title: '日常'
			// },
			motisa:'',
			datas: '',
			item: '',
			person_list: [],
			person_list_user_name1: '',
			person_list_nick_name1: '',
			person_list_dept_id1: '',

			person_list_user_name2: '',
			person_list_nick_name2: '',
			person_list_dept_id2: '',

			person_list_user_name3: 'null',
			person_list_nick_name3: 'null',
			person_list_dept_id3: 'null',

			person_list_zf1: '',
			person_list_zf2: '',
			person_list_zf3: '',
            aaaaa:'0',
			time1: '',
			time2: '',
			time3: '',
			list: [
				{
					id: '01',
					name: '20-10次'
				},
				{
					id: '02',
					name: '20-09次'
				},
				{
					id: '03',
					name: '20-08次'
				},
				{
					id: '04',
					name: '20-07次'
				},
				{
					id: '05',
					name: '20-06次'
				}
			]
		};
	},

	onShow() {
		this.getTime();
		this.is_login = uni.getStorageSync('user_token') ? true : false;
		if (!this.is_login) {
			uni.navigateTo({
				url: '../profile/user_login'
			});
			return false;
		}		
		this.show();
		this.teams();
		
		
		//获取位置信息
		this.getCity();
		let _this = this;
		this.$_if.Initialize(this);
		//用户详情
		this.user = uni.getStorageSync('user');
		this.user.name = this.user.nickName;
		this.user.phone = this.user.userName;
		this.user.fraction = this.user.fs;
		this.user.ranking = this.user.odr;
		this.user.team = this.user.deptName;
		this.user.deptId = this.user.deptId;
		this.user.bzpm = this.user.bzpm;

		this.$api.getKhdfDetail_jd({
			
		}).then(res => {
			_this.list_quarter = res.data.data;
		});
		this.yhts();
		this.$api.lcb({}).then(res => {
			// console.log(res )
			let res_company = res.data.rows[0];
			let list_lcb = [];
			for (let i = 0; i < res.data.rows.length; i++) {
				let item = res.data.rows[i];
				let _data = {
					dept_id: item.dept_id,
					dept_name: item.dept_name,
					aqlc: item.aqlc
				};
				list_lcb.push(_data);
				// console.log('安全历程',list_lcb)
			}
			// console.log(_this.user.deptId)
			let current_class = null;
			for (let i = 0; i < list_lcb.length; i++) {
				let item = list_lcb[i];
			
				if (item.dept_id == _this.user.deptId) {
					current_class = item;
				}
				
				if (!current_class) {
					item.dept_id = 100;
					item.dept_id == _this.user.deptId
					current_class = item
				}
						
				
			}

			
			_this.class_lcb_days =  current_class.aqlc;
		
		});
		
	},
	onLoad() {
		let _this = this;
		
		//首页第一条 新闻
		this.$_if.Initialize(this);
		let url = '/' + 1 + '/' + 1;	
			
		this.xwlb()
		this.bzpm()
		this.zfpm()
		this.xwlb()
		this.mouth_kaohe();	
		
	},
	
	methods: {
		xwlb(){
			let url = '/' + 1 + '/' + 1;
			// console.log(url)
			this.$api.notis().then(res=>{
					this.motisa= res.data.data[0].title
			
			})
			
			
			
	
		this.$api.tblist(url).then(res=>{
			console.log('tblist',res)
			let code = res.data.code;
			if (code == 200) this.message = res.data.rows[0].tbTitle;
		});
		this.$api.xwlb(url).then(res => {
			console.log('xwlb', res);
			let code = res.data.code;
			if (code == 200) this.message = res.data.rows[0].noticeTitle;
		})
		},
		getsort(index) {},
		getTime: function() {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			month >= 1 && month <= 9 ? (month = '0' + month) : '';
			day >= 0 && day <= 9 ? (day = '0' + day) : '';
			//var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
			var timer = year + '-' + month + '-' + day;
			var timers = year+'-'+month

			this.datas = timer;
			this.datasa = timers
			// console.log(this.datasa);
		},

		JumpDetail1() {
			let _this = this;
			uni.setStorageSync('query_user_name', _this.person_list_user_name1);
			uni.setStorageSync('query_nick_name', _this.person_list_nick_name1);
			uni.setStorageSync('query_dept_id', _this.person_list_dept_id1);
			uni.switchTab({
				url: '../kaohe/index'
			});
		},
		JumpDetail2() {
			let _this = this;
			uni.setStorageSync('query_user_name', _this.person_list_user_name2);
			uni.setStorageSync('query_nick_name', _this.person_list_nick_name2);
			uni.setStorageSync('query_dept_id', _this.person_list_dept_id2);
			uni.switchTab({
				url: '../kaohe/index'
			});
		},
		JumpDetail3() {
			let _this = this;
			uni.setStorageSync('query_user_name', _this.person_list_user_name3);
			uni.setStorageSync('query_nick_name', _this.person_list_nick_name3);
			uni.setStorageSync('query_dept_id', _this.person_list_dept_id3);
			uni.switchTab({
				url: '../kaohe/index'
			});
		},
		JumpDetail(person) {
			let _this = this;
			uni.setStorageSync('query_user_name', person.user_name);
			uni.setStorageSync('query_nick_name', person.nick_name);
			uni.setStorageSync('query_dept_id', person.dept_id);
			uni.switchTab({
				url: '../kaohe/index'
			});
		},
		async getCity() {
			let _this = this;
			uni.showLoading({
				title: '获取定位中'
			});
			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					uni.getLocation({
						type: 'gcj02',
						//type: 'wgs84',
						success: function(res) {
							// console.log(res)
							// console.log('当前位置的经度：' + res.longitude);
							// console.log('当前位置的纬度：' + res.latitude);
							_this.longitude = res.longitude;
							_this.latitude = res.latitude;
							let qqmapsdk = new QQMapWX({
								key: 'V6DBZ-UX6CU-NGIVI-2ZBJD-CP2TT-RVF6U'
							});
							uni.request({
								url: 'https://devapi.qweather.com/v7/weather/now',
								data: {
									location: res.longitude + ',' + res.latitude,
									key: 'aa861053f4e14ca397c9bd7540fd79a5'
								},
								method: 'GET',
								success: function(res) {
									_this.weather = res.data.now.text;
									// console.log(res);
								},
								fail() {
									// console.log('fail');
								}
							});
							// 在获取经纬度的成功回调里写入：
							// //逆地址解析
							qqmapsdk.reverseGeocoder({
								location: {
									latitude: res.latitude,
									longitude: res.longitude
								},
								success(res) {
									// console.log('res', res);
									_this.current_admin = res.result.address;
									uni.hideLoading();
									_this.city = res.result.address_component.district;
								}
							});
						}
					});
				}
			});
		},
		//提示框
		yhts(){
			this.$api.yhts({
				userName:this.user.phone,
				deptId:this.user.deptId,
			}).then(res=>{
				this.sh = res.data.data[0];
				this.cl = res.data.data[1];
				this.yz = res.data.data[2];
				if(res.data.data.length == 3){
					var ss = "未审核:" + this.sh + ",未处理:" + this.cl + ",未验证:" + this.yz;
				}else{
					var ss = "未处理:" +this.sh
				}				
				console.log("11=="+ss)
				uni.showModal({
					title:'提示',
					content: ss,
					success:function(res){
						if(res.confirm){
							console.log("用户点击确定")
						}else if(res.cancel){
							console.log("用户点击取消")
						}
						
					}
				})
				console.log(res)
			})
		},
		mouth_kaohe() {
			let _this = this;
			this.$api.getKhdfDetail({}).then(res => {
				//console.log(res)
				_this.list_quarter = res.data.data;
			});
		},
		jidu_kaohe() {
			let _this = this;
			this.$api.getKhdfDetail_jd({
				khyf:_this.datasa
			}).then(res => {
				// console.log(res)
				_this.list_quarter = res.data.data;
			});
		},
		show() {
			let user_token = uni.getStorageSync('user_token');
			if (!user_token) {
				uni.navigateTo({
					url: '/pages/profile/user_login'
				});
			}
		},
		teams() {		
				this.$api.getGrpm({	
			deptId: this.user.deptId,
			userName: this.user.userName,
			}
			
			).then(res => {
				// console.log('班组排名')
			 // console.log(res)
				this.aaaaa = res.data.data[0].pm;
				
			});
		},
		sign() {
			let _this = this;
			this.$api.sign(_this.user.userName).then(res => {
				// console.log('[签到]返回值：', res);
				let code = res.data.code;
				if (code == 200) {
					_this.videoPath = 'https://jsy.ihltec.com/prod-api' + res.data.data.videoPath;
					_this.sign_01 = res.data.data.yqd
				} else {
					uni.showToast({
						title: "签到成功"
					});
				}
			});
		},
		bzpm(){
		this.$api.Bzpm({
			pageNum:1,
			pageSize:10,
			khyf:this.datasa,
			 dept_id:this.user.deptId,
			
		})
		.then(res=>{
			console.log(res.data.rows)
			let code = res.data.code;
				if (code == 200 && res.data.rows.length != 0) {
			this.person_list = res.data.rows;
			// console.log(res.data.data[0].nick_name)
			this.person_list_user_name1 = res.data.rows[0].user_name;
			this.person_list_user_name2 = res.data.rows[1].user_name;
			this.person_list_user_name3 = res.data.rows[2].user_name;
			
			this.person_list_nick_name1 = res.data.rows[0].nick_name;
			this.person_list_nick_name2 = res.data.rows[1].nick_name;
			this.person_list_nick_name3 = res.data.rows[2].nick_name;
					
			this.person_list_dept_id1 = res.data.rows[0].dept_id;
			this.person_list_dept_id2 = res.data.rows[1].dept_id;
			this.person_list_dept_id3 = res.data.rows[2].dept_id;
					
			this.person_list_zf1 = res.data.rows[0].zf;
			this.person_list_zf2 = res.data.rows[1].zf;
			console.log(res.data.rows)
			this.person_list_zf3 = res.data.rows[2].zf;
			}
		})
		},
		
		zfpm(){
		this.$api
			.Zfpm({
				pageNum: 1,
				pageSize: 10,
				khyf:this.datasa,				
			})
			.then(res => {
				console.log(res.data.data);
				let code = res.data.code;
				if (code == 200 && res.data.data.length != 0) {
					this.person_list = res.data.data;
					this.person_list_user_name1 = res.data.data[0].user_name;
					this.person_list_user_name2 = res.data.data[1].user_name;
					this.person_list_user_name3 = res.data.data[2].user_name;
		
					this.person_list_nick_name1 = res.data.data[0].nick_name;
					this.person_list_nick_name2 = res.data.data[1].nick_name;
					this.person_list_nick_name3 = res.data.data[2].nick_name;
		
					this.person_list_dept_id1 = res.data.data[0].dept_id;
					this.person_list_dept_id2 = res.data.data[1].dept_id;
					this.person_list_dept_id3 = res.data.data[2].dept_id;
		
					this.person_list_zf1 = res.data.data[0].zf;
					console.log(this.person_list_zf1,this.person_list_zf2,this.person_list_zf3)
					this.person_list_zf2 = res.data.data[1].zf;
					this.person_list_zf3 = res.data.data[2].zf;
					// console.log(res);
					// for(let i = 3;i<res.data.data.length ; i++){}
				}
			});},
		
		
		checked(el) {
			this.item = el;
		},
		toOpen() {
			this.$refs.jpSelect.toOpen();
		},
		change_kaohe_c_id(index) {
			if (this.kaohe_c_id == index) {
				this.kaohe_c_id = -1;
			} else {
				this.kaohe_c_id = index;
			}
		},
		change_category_id(index) {
			this.category_id = index;
			if (index == 0) {
				this.mouth_kaohe();
			} else {
				this.jidu_kaohe();
			}
		},
		
		change_category_ids(index) {
			this.category_ids = index;
			if (index == 0) {
				this.bzpm();
			} else {
				this.zfpm();
			}
		},
		// sign_1() {
		// 	let _this = this;
		// 	// console.log(this.sign_01)
		// 	// console.log(_this.sign_01)
		// 	this.$api.sign(_this.user.phone).then(res => {
		// 		// console.log('[签到]返回值：', res);
		// 		// _this.sign_01 = res.data.data.yqd
		// 		// uni.setStorageSync("is_signed", _this.sign_01)
		// 		// console.log('签到',res)
		// 		uni.showToast({
		// 			title: '签到成功'
		// 		})
		// 	});
		// },
		
		showModal(e) {
			this.modalName = e.currentTarget.dataset.target;
		},
		hideModal(e) {
			this.modalName = null;
			this.videoPath = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.status_bar {
	padding-top: calc(var(--status-bar-height));
	background-color: #01aaed;
}

page {
	background-color: #f2f2f2;
}

.top-tip-container {
	height: $line-height-1;
	line-height: $line-height-1;
	overflow: hidden;
	@extend .container-3;
	background-color: #f2f2f2;
	font-size: $uni-font-size-base;
	padding: 10upx 20upx;
	display: flex;
	justify-content: space-between;
}

.world-position-container,
.notice-container {
	height: $line-height-2;
	line-height: $line-height-2;
	background-color: $background-color-1;
	font-size: $font-size-sm;
	overflow: hidden;
	@extend .container-3;

	image {
		@extend .icon-image-size;
	}
}

.world-position-container {
	font-size: $uni-font-size-base;
	@extend .flex-between;
	// #ifdef MP-WEIXIN
	padding-top: calc(var(--status-bar-height) + 20upx);
	// #endif

	image {
		padding-top: 8px;
	}
}

.notice-container {
	background-color: #ffc107;
	color: $font-color-1;
	font-size: $uni-font-size-base;
	@extend .flex-between;

	.notice-left {
		@extend .flex-between;

		.notice-content {
			padding-left: 10px;
		}
	}
}

.profile-card-container {
	background-color: $background-color-1;
	color: $font-color-1;
	padding: 0upx 20upx 10upx 20upx;
	margin-top: 2upx;

	.profile-card {
		box-shadow: 0 21px 42px rgba(171, 196, 253, 0.75);
		@extend .radius-1;
		@extend .flex-between;
		justify-content: start;
		background-color: #6ba4ff;
		border: solid 1px #5c8af9;
		padding: 20upx;
		padding-bottom: 40upx;
		font-size: $uni-font-size-base;
		background-image: url(../../static/image/home-card-background.png);
		background-position: left;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// position: relative;

		.avatar-container {
			.avatar {
				image {
					@extend .avatar-image-size;
					@extend .image-radis;
				}
			}

			.medal-list {
				@extend .flex-between;
				justify-content: center;

				.medal-item {
					margin-left: 8upx;

					&:first-child {
						margin-left: 0;
					}
				}
			}
		}

		.detail {
			margin-left: 10px;

			.detail-line {
				margin-top: 15upx;
				width: 200px;
				overflow-y: hidden;
				height: 35upx;

				&:first-child {
					margin-top: 0;
				}
			}

			.phone {
				margin-top: 10upx;
				width: 300upx;
			}
		}

		.other {
			position: absolute;
			height: 30px;
			margin-top: 100px;
			text-align: right;
			right: 20px;

			.sign {
				.day-number {
					padding: 0 10upx;
					font-size: $font-size-title;
				}
			}

			.sign-button {
				position: absolute;
				width: 120upx;
				right: -12px;
				margin-top: -100px;

				image {
					@extend .icon-image-size-full;
				}
			}
		}
	}

	.medal-item {
		image {
			@extend .medal-image-size;
		}
	}

	.group-safe-mileage,
	.business-safe-mileage {
		color: $font-color-4;
		text-align: center;
		width: 70%;
		margin: 0 auto;
		border-bottom: solid 1px #142b59;
		margin-top: 20upx;
		line-height: 52upx;

		.day-number {
			color: $font-color-5;
			padding: 0 10upx;
		}
	}
}

.icon,
.active-icon {
	@extend .c-icon-image-size;

	image {
		transform: rotate(-90deg);
		@extend .c-icon-image-size;
	}
}

.active-icon {
	image {
		transform: rotate(0deg);
		@extend .c-icon-image-size;
	}
}

.assessment-container {
	.assessment-title-list {
		background-color: $background-color-1;
		@extend .flex-between;
		// margin-top: 20upx;
		padding: 0upx 0 5upx 0;

		.assessment-title-item {
			width: 40%;
			text-align: center;
			margin: 0 auto;
			padding: 15upx 20upx;

			text {
				line-height: 56upx;
				font-size: 33upx;
				display: block;
				padding: 10upx;
			}
		}

		.active {
			font-weight: bold;

			text {
				color: $color-1;
				border-bottom: solid 1px $color-1;
			}
		}
	}

	.assessment-content-list {
		background-color: $background-color-1;
		padding: 10upx 0;
		// padding-bottom: 10upx;

		.assessment-content-item {
			margin-top: 0;
			padding: 10upx 10upx 0 10upx;

			.choose-stage {
				line-height: 40upx;
				margin-right: 10upx;
			}

			.assessment-categroy-title {
				@extend .flex-between;
				padding: 0 10upx 0 10upx;

				.assessment-categroy-title-left,
				.assessment-categroy-title-right {
					width: 50%;
					padding: 0upx 20upx;
				}

				.assessment-categroy-title-left {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.icon {
						// padding: 0 10upx 10upx 5upx;
					}

					.title {
						padding-left: 10upx;
						font-size: 35upx;
						color: #b23636;
					}
				}

				.assessment-categroy-title-right {
					display: flex;
					justify-content: flex-end;
				}
			}

			.assessment-categroy-detail {
				// padding: 10upx 20upx;
				// width: calc(100% - 45upx);
				// @extend .flex-between;
				color: rgba(0, 0, 0, 0.6);

				@extend .flex-between;
				background-image: url(../../static/image/kaohe-list-detail-c.png);
				background-repeat: repeat-x;
				background-position: left center;
				margin-left: 20upx;
				font-size: 30upx;
				height: 50upx;
				line-height: 50upx;
				overflow-y: hidden;

				.assessment-categroy-detail-title {
					padding-left: 15upx;
					padding-right: 10upx;
					background-color: #fff;
				}

				.assessment-categroy-detail-score {
					padding-right: 15upx;
					padding-left: 10upx;
					background-color: #fff;
				}
			}
		}
	}
}

.overall-order {
	@extend .container-2;
	margin-top: 0;
	background-color: $background-color-1;
	padding: 20upx 10upx;

	.overall-order-title {
		display: flex;
		text-align: center;

		.title-name {
			font-size: $font-size-lg;
		}

		.choose-stage {
			margin: 10upx auto;
			margin-bottom: 0;
			width: 70px;
		}

		.title-c-down {
			image {
				width: 70px;
				height: 10px;
			}
		}
	}

	.order-list {
		margin-top: 20px;
		padding: 0 40upx;
		background-image: url(../../static/image/home-order-list-background.png);
		background-position: center 260upx;
		background-repeat: no-repeat;
		background-size: calc(100% - 10upx);
		padding-bottom: 10px;

		.order-list-content {
			@extend .flex-between;
			color: $font-color-1;
			padding: 0 5upx;
			padding-top: 24upx;

			image {
				@extend .icon-image-size-full;
			}

			.nickname,
			.score {
				text-align: center;
			}

			.nickname {
				margin-top: 40px;
				background-color: #8a6081;
				padding: 5px;
				border-radius: 50upx;
				width: 90px;
				height: 30px;
				overflow-y: hidden;
			}

			.score {
				margin-top: 10px;
			}

			.avatar {
				image {
					width: 200upx;
					height: 200upx;
					@extend .image-radis;
					border: solid 4px #d8271c; //#d8271c #f9a771
				}
			}

			.flag {
				position: absolute;
				margin-top: -240upx;
				margin-left: -25upx;

				image {
					width: 100upx;
				}

				text {
					position: absolute;
					color: $font-color-1;
					margin-top: 13px;
					margin-left: -32px;
				}
			}

			.first-order-list {
				margin: 0 auto;

				.flag {
					margin-left: 3px;
				}

				.avatar {
					image {
						width: 200upx;
						height: 200upx !important;
					}
				}

				.nickname {
					margin: 0 auto;
					margin-top: 40px;
				}
			}

			.second-order-list {
				margin-top: 45px;

				.avatar {
					image {
						width: 160upx;
						height: 160upx !important;
						border-color: #fe6d5a; //#f9a771
					}
				}

				.flag {
					margin-top: -200upx;
					margin-left: -25upx;

					image {
						width: 100upx;
					}
				}
			}

			.third-order-list {
				margin-top: 75px;

				.avatar {
					padding-left: 15px;

					image {
						width: 120upx;
						height: 120upx !important;
						border-color: #f9a771;
					}
				}

				.flag {
					margin-top: -170upx;
					margin-left: -5upx;

					image {
						width: 100upx;
					}
				}
			}
		}
	}

	.other-order-list {
		padding: 30upx 20upx;
		padding-top: 20upx;

		.other-order-item {
			@extend .flex-between;
			border-top: solid 2px #f3f3f3;
			font-size: 34upx;
			line-height: 52upx;
			height: 70upx;
			padding: 20upx 0;

			&:first-child {
				border-top: none;
			}

			.other-order-item-detail {
				@extend .flex-between;

				.order-list-number {
					margin-right: 20upx;
					margin-top: 5px;
					font-size: 20px;
					width: 20px;
					text-align: right;
				}

				.order-list-avatar {
					margin-right: 20upx;
					margin-left: 5px;

					image {
						width: 70upx;
						height: 70upx;
						@extend .image-radis;
						border: solid 1px #b6b5b1;
					}
				}

				.order-list-nickname {
					font-size: 15px;
					padding-left: 10px;
					overflow-y: hidden;
					margin-top: 5px;
					height: 50upx;
				}
			}

			.order-list-score {
				color: #e60012;
				width: 200upx;
				text-align: right;
			}
		}
	}
}

.mask {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);

	.mask-container {
		right: 50rpx;
		position: absolute;
		padding: 20upx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin-top: -30px;
		width: 60vw;
	}
}

.mask .testing-weather {
	width: 100%;
	text-align: center;
}

.mask .tips {
	margin-top: 10upx;
	text-decoration: underline;
	padding: 10upx;
}

.mask .video {
	width: 100%;
	margin: 0 auto;
	box-shadow: 0 -50px 60px rgba(0, 0, 0, 1);

	video {
		width: 100%;
	}
}

.assessment-categroy-detail-container {
	height: 55upx;
	line-height: 55upx;
	overflow-y: hidden;
	overflow-x: hidden;
	padding: 0 15upx 0 30upx;
}

.fadeIn {
	image {
		animation: downIn 0.3s;
		-webkit-animation: downIn 0.3s;
	}
}

.fadeOut {
	image {
		animation: downInClose 0.3s;
		-webkit-animation: downInClose 0.3s;
	}
}

.fadeIn1 {
	animation: downIn1 0.3s;
	-webkit-animation: downIn1 0.3s;
}

.fadeOut1 {
	animation: downInClose1 0.3s;
	-webkit-animation: downInClose1 0.3s;
}

@keyframes downIn {
	from {
		transform: rotate(0deg);
		opacity: 1;
	}

	to {
		transform: rotate(-90deg);
		opacity: 1;
	}
}

@keyframes downInClose {
	from {
		transform: rotate(-90deg);
		opacity: 1;
	}

	to {
		transform: rotate(0deg);
		opacity: 1;
	}
}

@keyframes downIn1 {
	from {
		opacity: 1;
		height: 55upx;
	}

	to {
		opacity: 0;
		height: 0;
	}
}

@keyframes downInClose1 {
	from {
		opacity: 0;
		height: 0;
	}

	to {
		opacity: 1;
		height: 55upx;
	}
}

@keyframes downIn2 {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes downInClose2 {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.action-round {
	animation: round 0.9s linear infinite;
	-webkit-animation: round 0.9s linear infinite;
}

@keyframes round {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(359deg);
	}
}

.top-tip-container {
	display: flex;
	height: 45upx;
	width: 100%;
	position: absolute;

	.world_round {
		display: block;
		width: 100%;
		animation: world_round linear infinite 7s;
	}
}

/* 头条小程序组件内不能引入字体 */
/* #ifdef MP-TOUTIAO */
@font-face {
	font-family: uniicons;
	font-weight: normal;
	font-style: normal;
	src: url('~@/static/uni.ttf') format('truetype');
}

/* #endif */

/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #efeff4;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

.example {
	padding: 0 15px 15px;
}

.example-info {
	padding: 15px;
	color: #3b4144;
	background: #ffffff;
}

.example-body {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	font-size: 14px;
	background-color: #ffffff;
}

/* #endif */
.example {
	padding: 0 15px;
}

.example-info {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 15px;
	color: #3b4144;
	background-color: #ffffff;
	font-size: 14px;
	line-height: 20px;
}

.example-info-text {
	font-size: 14px;
	line-height: 20px;
	color: #3b4144;
}

.example-body {
	flex-direction: column;
	padding: 15px;
	background-color: #ffffff;
}

.word-btn-white {
	font-size: 18px;
	color: #ffffff;
}

.word-btn {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	height: 48px;
	margin: 15px;
	background-color: #007aff;
}

.word-btn--hover {
	background-color: #4ca2ff;
}

.example-body {
	padding: 5rpx 0;
	padding-top: 20rpx;
	flex-direction: column;
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
}

.local-position {
	padding: 15upx 10px;
	background-color: #fff;
}

.news-se {
	margin-bottom: 2upx;
}
</style>
